<template>
	<!-- 检修详情 -->
	<view class="container">
		<view class="hidden-title">检修需求</view>
		<view class="background-white">
			<view class="flex text bor-btm">
				任务名称：<text>{{info.taskName}}</text>
			</view>
			<view class="flex text bor-btm">
				检修类型：<text>{{info.overhaulCategoryLabel}}</text>
			</view>
			<view class="flex text bor-btm">
				设备名称：<text>{{info.deviceName}}</text>
			</view>
			<view class="flex text bor-btm">
				检修开始时间：<text>{{info.taskStartTime}}</text>
			</view>
			<view class="flex text bor-btm">
				检修截止时间：<text>{{info.taskEndTime}}</text>
			</view>
			<view class="flex text bor-btm">
				任务编号：<text>{{info.taskNumber}}</text>
			</view>
			<view class="flex text bor-btm">
				添加人：<text>{{info.createUserName}}</text>
			</view>
			<view class="flex text bor-btm">
				添加时间：<text>{{info.createTime}}</text>
			</view>
		</view>
		<view class="hidden-title">检修内容</view>
		<view class="background-white bor-top">
			<uni-forms-item name="appTaskItemList">
				<uni-table stripe border>
					<uni-tr>
						<uni-th width="50" align="center">序号</uni-th>
						<uni-th align="center">检修内容</uni-th>
						<uni-th align="center">检修周期标准</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in info.appTaskItemList" :key="index">
						<uni-td align="center">{{ index + 1 }}</uni-td>
						<uni-td>{{ item.content }}</uni-td>
						<uni-td>{{ item.periodStandard }}</uni-td>
					</uni-tr>
				</uni-table>
				<!-- <uni-easyinput type="textarea" v-model="formData.examineContent" placeholder="请输入检修内容"
						maxlength="100"></uni-easyinput> -->
			</uni-forms-item>
		</view>
		<view class="hidden-title">备件信息</view>
		<view class="background-white bor-top">
			<uni-table ref="table" border stripe emptyText="暂无更多数据">
				<uni-tr>
					<uni-th width="50" align="center">序号</uni-th>
					<uni-th width="120" align="center">备件名称</uni-th>
					<uni-th width="60" align="center">数量</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in info.appTaskPartList" :key="index">
					<uni-td>{{ index+1 }}</uni-td>
					<uni-td>{{ item.partName }}</uni-td>
					<uni-td>{{ item.partNum }}</uni-td>
				</uni-tr>
			</uni-table>
		</view>
		<view class="hidden-title">执行状态</view>
		<view class="background-white">
			<view class="flex text bor-btm">
				当前状态：<text>{{info.taskStatusLabel}}</text>
			</view>
			<view class="flex text bor-btm">
				所属作业项目：<text>{{info.projectName}}</text>
			</view>
			<view class="flex text bor-btm">
				立项时间：<text>{{info.projectApprovalTime}}</text>
			</view>
			<view class="flex text bor-btm">
				项目负责人：<text>{{info.directorName}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getTaskDetail
	} from '@/api/repair/repair.js'
	export default {
		onLoad(option) {
			this.id = option.id
			this.detail(option.id)
		},
		data() {
			return {
				info: {
					appTaskItemList: [],
					appTaskPartList: []
				}
			}
		},
		methods: {
			detail(id) {
				getTaskDetail(id).then(res => {
					this.info = res.data
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		.background-white {
			background-color: #fff;
			padding: 20rpx 30rpx;
			box-sizing: border-box;

			.uni-forms-item__label {
				color: #333;
				font-size: 30rpx;
			}

			.bor-btm {
				display: flex;
				border-bottom: 1px solid #d5d7e3;
			}

			.photo {
				display: flex;
				justify-content: space-between;

				image {
					width: 214rpx;
					height: 214rpx;
				}
			}

			.text {
				padding-bottom: 20rpx;
				padding-top: 4rpx;
				color: #333;

				text {
					color: #666;
				}
			}
		}
	}

	.hidden-title {
		background: #f5f5f5;
		padding: 20rpx;
		color: #999;
	}

	.bor-top {
		border-top: 20rpx solid #f5f5f5;
	}

	.submit-group {
		background: #fff;
		z-index: 9;
		padding: 30px;
	}

	.u-button {
		width: 600rpx;
	}
</style>